jQuery Ajax File Upload(附源码)-白红宇

jQuery Ajax File Upload(附源码)

阅读量：4459 次

发布时间：2019-06-08

本文共 1621 字，大约阅读时间需要 5 分钟。

项目结构

Default.aspx

Upload.aspx

Scripts/…

style.css

效果图

客户端html代码

Default.aspx

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="UploadFile.aspx.vb" Inherits="Web.UploadFile" %>

```
        
```

```
$(function () {
```

```
var btnUpload = $('#upload');
```

```
var status = $('#status');
```

```
new AjaxUpload(btnUpload, {
```

```
action: 'Upload.aspx',
```

```
//Name of the file input box
```

```
name: 'uploadfile',
```

```
onSubmit: function (file, ext) {
```

if (!(ext && /^(jpg|png|jpeg|gif)$/.test(ext))) {

```
// check for valid file extension
```

status.text('Only JPG, PNG or GIF files are allowed');

```
return false;
```

```
}
```

```
status.text('Uploading...');
```

```
},
```

```
onComplete: function (file, response) {
```

```
//On completion clear the status
```

```
status.text('');
```

```
//Add uploaded file to list
```

```
if (response === "success") {
```

$('
').appendTo('#files').html('
' + file).addClass('success');

```
} else {
```

$('
').appendTo('#files').text(file).addClass('error');

```
}
```

```
}
```

```
});
```

```
});
```

```
        
```

```
        
```

```
Upload File
```

```
        
```

```
        
         Upload File
        
```

```
        
```

```
        
```

服务端处理代码Upload.aspx

Default.aspx

```
using System;
```

```
using System.Collections.Generic;
```

```
using System.Linq;
```

```
using System.Web;
```

```
using System.Web.UI;
```

```
using System.Web.UI.WebControls;
```

```
namespace JqueryAjaxUploadTest
```

```
{
```

public partial class Upload : System.Web.UI.Page

```
{
```

protected void Page_Load(object sender, EventArgs e)

```
{
```

```
try
```

```
{
```

HttpPostedFile hpfFile = Request.Files["uploadfile"];

hpfFile.SaveAs(Server.MapPath("~/uploads/") + hpfFile.FileName);

```
Response.Write("success");
```

```
}
```

```
catch (Exception)
```

```
{
```

```
Response.Write("fail");
```

```
}
```

```
}
```

```
}
```

```
}
```

下载地址：

找到文件 jquery ajax file upload(刚刚上传，文件可能还没刷出来)

转载于:https://www.cnblogs.com/psunny/archive/2010/10/21/1857326.html

你可能感兴趣的文章

React （2） -- State and Lifecycle

查看>>

【转】在EmEditor上编译并运行JAVA

查看>>

关于SqlDateTime溢出的问题

查看>>

jquery下php与ajax的数据交换方式

查看>>

魅蓝Note有几种颜色魅蓝Note哪个颜色好看

查看>>

使用PullToRefresh实现下拉刷新和上拉加载

NSBundle,UIImage,UIButton的使用

查看>>

vue-cli3 中console.log报错

JQuery EasyUI combobox动态添加option

查看>>